<template>
  <div class="Net7">
    <div class="head">
      <div class="top">
        <div class="LOGO">
          <h1>logo</h1>
        </div>
        <div class="nav">
          <ul class="t-nav">
            <li class="n1">
              <router-link to="/"> 发现音乐 </router-link>
            </li>
            <li class="n2">
              <router-link to="/MyMusic"> 我的音乐 </router-link>
            </li>
            <li class="n3">
              <router-link to="/Friend"> 社区 </router-link>
            </li>
            <li class="n4">
              <router-link to="/Video"> MV </router-link>
            </li>
          </ul>
        </div>
        <div class="sch">
          <input
            class="t-seek"
            type=""
            name=""
            placeholder="音乐/视频/用户"
            value=""
          />
        </div>
        <div class="btnu">
          <div class="t-btnw">
            <a href="">创作者中心</a>
          </div>
        </div>
        <div class="lg" v-if="$store.getters.newUser==null">
          <el-button
            type="text"
            @click="centerDialogVisible = true"
            >登录</el-button
          >
        </div>
        <div class="heads" v-if="$store.getters.newUser">
          <img
            :src="require('./assets/images/' + $store.getters.newUser.headAddress)"
            alt=""
          />
          <ul class="user-tag">
            <router-link :to="'/Detail/UserDetail?uid='+$store.getters.newUser.id"><li>用户信息</li></router-link>
            <router-link to=""><li @click="clear_data">退出</li></router-link>
          </ul>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <el-dialog
      title="帐号密码登录"
      :visible.sync="centerDialogVisible"
      width="15%"
      center
    >
      <el-form :model="form">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="账号/邮箱/手机号登录"
          maxlength="30"
          prefix-icon="el-icon-user-solid"
          clearable
        ></el-input>
        <el-input
          v-model="form.pwd"
          autocomplete="off"
          placeholder="密码"
          show-password
          prefix-icon="el-icon-s-cooperation"
        ></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        pwd: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      formLabelWidth: "120px",
      centerDialogVisible: false,
      UserDatashow:true,
      Loginshow:false,
    };
  },
  methods: {
    login() {
      this.centerDialogVisible = true;
      this.$http
        .post(
          "http://localhost:31551/api/Users/Login/" +
            this.form.name +
            "/" +
            this.form.pwd
        )
        .then((result) => {
          if (result.status == "200") {
            alert("登录成功");
            this.$store.commit("undate", result.data); 
            this.showRentPrise = true;
            this.centerDialogVisible = false;
          } else {
            alert("登录失败");
          }
        });
    },
    //清空当前用户数据
    clear_data() {
      window.localStorage.removeItem("userInfo");
      location.reload();
    },
  },
};
</script>

<style>
@import "./assets/css/common.css";
.LOGO{
  color: #ccc;
}

/* 头部 */
.head {
  width: 100%;
  height: 75px;
  background-color: black;
  border-bottom: 5px solid red;
}

.top {
  width: 1250px;
  height: 75px;
  margin: auto;
}

.nav ul li {
  float: left;
  width: 100px;
  text-align: center;
  line-height: 75px;
}

.LOGO {
  width: 100px;
  height: 75px;
  line-height: 75px;
  float: left;
  text-align: center;
}
/* 主导航 */
.nav {
  height: 75px;
  float: left;
}
/* 搜索框 */
.sch {
  float: left;
  height: 75px;
  margin-left: 260px;
}

.sch input {
  border-radius: 50px;
  padding-left: 30px;
  height: 35px;
  margin-top: 15px;
  outline: none;
  color: #000;
}
/* 创作者中心 */
.btnu {
  float: left;
  height: 75px;
}
.btnu div {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  word-break: break-word;
  padding: 0px;
  margin: 0px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  width: 90px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #4f4f4f;
  color: #ccc;
  border-radius: 20px;
}

.lg {
  float: left;
  line-height: 75px;
  margin-left: 20px;
}
/* 头像 */
.heads {
  float: left;
  height: 75px;
  width: 50px;
  border-radius: 50%;
}
.heads img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15px;
  margin-left: 15px;
}
/* 头像信息列表 */
.heads ul li {
  width: 150px;
  height: 30px;
  line-height: 30px;
  margin-left: 30px;
  background-color: #000;
  text-align: center;
  border: 1px solid #ccc;
}
.user-tag {
  display: none;
}
.heads:hover .user-tag {
  display: block;
}
</style>
